<template>
  <div class="com-page">
    <div class="com-chart" ref="seven_yuqing_fenxi"></div>
  </div>
</template>

<script>
export default {
  name: "seven_yuqing_fenxi",
  mounted() {
    this.initChart()
    this.getData()
    // this.updateChart()
    window.addEventListener('resize', this.screenAdapter)
    // 在页面加载完成的时候, 主动进行屏幕的适配
    this.screenAdapter()
  },
  data() {
    return {
      chartInstane: null,
      allData: [], // 从服务器中获取的所有数据
      showChoice: false, // 是否显示可选项
      // choiceType: 'map', // 显示的数据类型
      titleFontSize: 0 // 指明标题的字体大小
    }
  },
  methods: {
    initChart() {
      this.chartInstane = this.$echarts.init(this.$refs.seven_yuqing_fenxi)
      const initOption = {
        title: {
          text: '▎七日趋势分析',
          textStyle:{
            color:"#fff",
          }
        },
        grid: {
          left: '3%',
          top: '35%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          left: 20,
          top: '15%',
          icon: 'circle',
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        }
      }
      this.chartInstane.setOption(initOption)
    },
    // ret 就是服务端发送给客户端的图表的数据
    async getData() {
      // await this.$http.get()
      // 对allData进行赋值
      const {data: ret} = await this.$http.get('/index')
      this.allData = ret.data.day7emtionTrend
      // console.log("day7emtionTrend===>",this.allData)
      this.updateChart()
    },
    updateChart() {
      // 半透明的颜色值
      const colorArr1 = [
        'rgba(11, 168, 44, 0.5)',
        'rgba(44, 110, 255, 0.5)',
        'rgba(22, 242, 217, 0.5)',
        'rgba(254, 33, 30, 0.5)',
        'rgba(250, 105, 0, 0.5)'
      ]
      // 全透明的颜色值
      const colorArr2 = [
        'rgba(11, 168, 44, 0)',
        'rgba(44, 110, 255, 0)',
        'rgba(22, 242, 217, 0)',
        'rgba(254, 33, 30, 0)',
        'rgba(250, 105, 0, 0)'
      ]
      // 处理数据
      // 类目轴的数据
      // const timeArr = this.allData.common.month
      const timeArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      // y轴的数据 series下的数据
      // const valueArr = this.allData[this.choiceType].data
      // const valueArr = this.allData[this.choiceType].data
      let seriesArr =[]

      // 折线图的颜色
      let colorArr =["DodgerBlue","orange","red"]

      for (let i = 0; i <this.allData.length; i++) {
        let qinggan=""
        if (this.allData[i].emo=="POS"){
          qinggan="积极"
        }else if(this.allData[i].emo=="NEG"){
          qinggan="消极"
        }else {
          qinggan="中性"
        }
        seriesArr.push({
          name:qinggan,
          type: 'line',
          smooth:true,
          stack: '总量',
          data:this.allData[i].count,
          itemStyle: {
            normal: {
              // color: '#8cd5c2', //改变折线点的颜色
              lineStyle: {
                color: colorArr[i] //改变折线颜色
              }
            }
          }
        })
      }
      // console.log("seriesArr==>",seriesArr)

      const dataOption = {
        xAxis: {
          data: timeArr
        },
        // legend: {
        //   data: legendArr
        // },
        series: seriesArr
      }
      this.chartInstane.setOption(dataOption)
    },
    screenAdapter() {
      this.titleFontSize = this.$refs.seven_yuqing_fenxi.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize/1.3
          }
        },
        legend: {
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemGap: this.titleFontSize,
          textStyle: {
            fontSize: this.titleFontSize / 2
          }
        }
      }
      this.chartInstane.setOption(adapterOption)
      this.chartInstane.resize()
    },
  }
}
</script>

<style scoped>

</style>
